<template>
  <div v-loading="loading">
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>亿码互联管理系统</el-breadcrumb-item>
        <el-breadcrumb-item> 使用统计 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mt-4">
      <el-row gutter="20">
        <el-col :span="8">
          <div class="border p-2 mb-4 shadow-xl">
            <div v-if="ishowip" ref="chartDomip" style="width: 600px; height: 600px"></div>
            <div v-else class="p-1" style="width: 100%; height: 300px">
              <div style="font-size: 18px; font-weight: 800">图片容量</div>
              <div
                style="width: 300px; height: 220px; margin-top: 20px"
                class="flex justify-center items-center bg-gray-200"
              >
                暂无数据
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="border p-2 mb-4 shadow-xl">
            <div v-if="ishowip1" ref="chartDomip1" style="width: 600px; height: 600px"></div>
            <div v-else class="p-1" style="width: 100%; height: 300px">
              <div style="font-size: 18px; font-weight: 800">音视频容量</div>
              <div
                style="width: 300px; height: 220px; margin-top: 20px"
                class="flex justify-center items-center bg-gray-200"
              >
                暂无数据
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="border p-2 mb-4 shadow-xl">
            <div v-if="ishowip2" ref="chartDomip2" style="width: 600px; height: 600px"></div>
            <div v-else class="p-1" style="width: 100%; height: 600px">
              <div style="font-size: 18px; font-weight: 800">音视频流量</div>
              <div
                style="width: 100%; height: 540px; margin-top: 20px"
                class="flex justify-center items-center bg-gray-200"
              >
                暂无数据
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { i44_getuserinfo } from '@/api/index.js';
import * as echarts from 'echarts';
const loading = ref(true);
loading.value = false;
const chartDomip = ref(null);
const chartDomip1 = ref(null);
const chartDomip2 = ref(null);

let chartInstanceip = null;
let chartInstanceip1 = null;
let chartInstanceip2 = null;

let ishowip = ref(true);
let ishowip1 = ref(true);
let ishowip2 = ref(true);

onMounted(() => {
  i44_getuserinfo().then((res) => {
    console.log('res:', res);
    const u = res.data.data.userinfo;
    const s = res.data.data.userstatisticsinfo;
    const v = res.data.data.vipinfo;

    const series_data = [];
    const series_data2 = [];
    const series_data3 = [];
    series_data.push({
      name: '已使用',
      labelText: `${((s.imgtxtByteused / v.limit2Imgtxtsum) * 100).toFixed(2)}%`,
      value: Number.parseFloat(((s.imgtxtByteused / v.limit2Imgtxtsum) * 100).toFixed(2)),
      format: 'data2',
    });

    series_data.push({
      name: '剩余',
      labelText: `${(((v.limit2Imgtxtsum - s.imgtxtByteused) / v.limit2Imgtxtsum) * 100).toFixed(2)}%`,
      value: Number.parseFloat((((v.limit2Imgtxtsum - s.imgtxtByteused) / v.limit2Imgtxtsum) * 100).toFixed(2)),
    });

    chartInstanceip = echarts.init(chartDomip.value);
    const option = {
      title: {
        text: '图片容量',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '0%',
        left: 'center',
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: series_data,
        },
      ],
    };
    chartInstanceip.setOption(option);
    if (series_data.length === 0) {
      ishowip.value = false;
    }
    series_data2.push({
      name: '已使用',
      labelText: `${((s.auvideoByteused / v.limit2Audiovideosum) * 100).toFixed(2)}%`,
      value: Number.parseFloat(((s.auvideoByteused / v.limit2Audiovideosum) * 100).toFixed(2)),
    });

    series_data2.push({
      name: '剩余',
      labelText: `${(((v.limit2Audiovideosum - s.auvideoByteused) / v.limit2Audiovideosum) * 100).toFixed(2)}%`,
      value: Number.parseFloat(
        (((v.limit2Audiovideosum - s.auvideoByteused) / v.limit2Audiovideosum) * 100).toFixed(2),
      ),
    });
    chartInstanceip1 = echarts.init(chartDomip1.value);
    const option1 = {
      title: {
        text: '音视频容量',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '0%',
        left: 'center',
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: series_data2,
        },
      ],
    };
    chartInstanceip1.setOption(option1);
    if (series_data2.length === 0) {
      ishowip1.value = false;
    }
    if (v.limit5AudiovideoflowSum !== 0) {
      series_data3.push({
        name: '已使用',
        labelText: `已使用${((s.auvideoFlowused / v.limit5AudiovideoflowSum) * 100).toFixed(2)}%`,
        value: Number.parseFloat(((s.auvideoFlowused / v.limit5AudiovideoflowSum) * 100).toFixed(2)),
      });

      series_data3.push({
        name: '剩余',
        labelText: `剩余${(((v.limit5AudiovideoflowSum - s.auvideoFlowused) / v.limit5AudiovideoflowSum) * 100).toFixed(
          2,
        )}%`,
        value: Number.parseFloat(
          (((v.limit5AudiovideoflowSum - s.auvideoFlowused) / v.limit5AudiovideoflowSum) * 100).toFixed(2),
        ),
      });
    }
    chartInstanceip2 = echarts.init(chartDomip2.value);
    const option2 = {
      title: {
        text: '音视频流量',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '0%',
        left: 'center',
      },
      series: [
        {
          name: '扫码次数',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: series_data3,
        },
      ],
    };
    chartInstanceip2.setOption(option2);
    if (series_data3.length === 0) {
      ishowip2.value = false;
    }
  });
});
</script>
<style scoped lang="less"></style>
